<template>
  <el-aside class="left">
    <Group :groupBtnList="groupBtnList" />
    <PrivateMessage />
  </el-aside>
  <div class="vertical-division"></div>
  <el-main>
    <router-view :key="route.fullPath" />
  </el-main>
  <div class="vertical-division"></div>
  <el-aside class="right"></el-aside>
</template>

<script setup lang="ts">
import Group from "@/components/private-letter/private-letter-left/Group.vue";
import PrivateMessage from "@/components/private-letter/private-letter-left/PrivateMessage.vue";
import { reactive } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

interface GroupBtn {
  group: string;
  name: string;
  icon: string;
  number: number;
}

const groupBtnList = reactive<GroupBtn[]>([
  {
    group: "online",
    name: "在线",
    icon: "account-outline",
    number: 0,
  },
  {
    group: "all",
    name: "全部",
    icon: "account-multiple-outline",
    number: 0,
  },
  {
    group: "request",
    name: "请求",
    icon: "account-multiple-plus-outline",
    number: 0,
  },
  {
    group: "blacklist",
    name: "已屏蔽",
    icon: "account-off-outline",
    number: 0,
  },
]);
</script>

<style scoped>
.left {
  position: relative;
  flex: 0 0 280px;
}

.right {
  width: 50px;
  background-color: #d8ffd4;
}

.el-main {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.vertical-division {
  margin: 0 5px;
  width: 0;
  height: 100%;
  /*边框*/
  border: 1px solid #e1e1e1;
}
</style>
